<template>
  <div class="xpHotel">
    <common-nav-header />
      <div ref="wrapper" class="wrapper">
        <div>
          <common-banner :bannerData="fiveStarQuality" v-if="fiveStarQuality" />
          <!-- <common-banner :bannerData="fiveStarHotel" v-if="fiveStarHotel" :linkUrl="hotelDetails" /> -->
          <hotel-swiper :bannerData="fiveStarHotel" v-if="fiveStarHotel"  />
          <divider>已经到达最底部</divider>
        </div>
      </div>
  </div>
</template>
<script>
import CommonNavHeader from 'common/commonHeader/CommonNavHeader'
import commonBanner from 'common/commonBanner/CommonBanner'
import HotelSwiper from './components/HotelSwiper'
import {
  Divider
} from 'vux'
import BScroll from 'better-scroll'
import {
  hotel
} from 'util/netApi'
import {
  http
} from 'util/request'
export default {
  name: 'Hotel',
  components: {
    CommonNavHeader,
    commonBanner,
    HotelSwiper,
    Divider
  },
  data () {
    return {
      fiveStarQuality: null,
      fiveStarHotel: null,
      hotelDetails: '/hotelDetails/'
    }
  },
  methods: {
    getHotelData () {
      http(hotel)
        .then(res => {
          console.log(res)
          this.fiveStarQuality = res.data.body.fiveStarQuality
          this.fiveStarHotel = res.data.body.fiveStarHotel
          this.scrollInit()
        })
        .catch(err => {
          console.log(err)
        })
    },
    scrollInit () {
      if (!this.scroll) {
        this.scroll = new BScroll(this.$refs.wrapper, {
          scrollY: true,
          click: true,
          bounce: {
            top: true,
            bottom: true
          }
        })
      } else {
        this.scroll.refresh()
      }
    }
  },
  created () {
    this.getHotelData()
  }
}
</script>

<style lang="stylus" scoped>
.xpHotel
  height 100%
  padding-top 148px
  .wrapper
    height 100%
</style>
